<template>
  <div class="ach-list-wrap display-flex flex-column">
    <div class="panel panel-form">
      <el-form :inline="true" class="filter-form">
        <div class="form-content">
          <el-form-item label="时间">
            <el-date-picker
              v-model="queryParams.start_time"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="开始时间"
            />
            <el-date-picker
              v-model="queryParams.end_time"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="结束时间"
            />
          </el-form-item>
          <el-form-item label="事件类型">
            <el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
              <el-option v-for="(val, key) in typeList" :key="key" :label="val" :value="key" />
            </el-select>
          </el-form-item>
          <el-form-item label="事件严重性">
            <el-select v-model="queryParams.type" placeholder="请选择严重性" clearable>
              <el-option v-for="(val, key) in typeList" :key="key" :label="val" :value="key" />
            </el-select>
          </el-form-item>
          <el-form-item label="用户">
            <el-input v-model="queryParams.user" clearable placeholder="请输入操作用户" />
          </el-form-item>
        </div>
        <div>
          <el-button @click="resetFilterForm()">重置</el-button>
          <el-button type="primary" @click="getList(1)">查询</el-button>
        </div>
      </el-form>
    </div>
    <div class="panel flex flex-column table-container" style="padding-bottom: 0">
      <el-table v-loading="loading" :border="true" :data="tableData"  height="100%" :header-cell-style="{background:'#D8E8FF'}">
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column prop="time" label="操作时间" width="200" align="center" />
        <el-table-column prop="user" label="操作用户" width="100" align="center" />
        <el-table-column prop="info" label="操作实例" width="120" align="center" />
        <el-table-column prop="info" label="严重性" width="120" align="center" />
        <el-table-column prop="database" label="数据库" width="200" align="center" />
        <el-table-column prop="sql_type" label="SQL类型" width="130" align="center" />
        <el-table-column prop="sql" label="SQL" align="center" min-width="200" />
        <el-table-column prop="status" label="状态" min-width="100" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==='成功'" type="success" size="small">{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="行数" width="100" align="center" />
        <el-table-column prop="consume" label="耗时（ms）" width="100" align="center" />
        <el-table-column prop="remark" label="备注" width="120" align="center" />
      </el-table>
      <div class="pagination-container">
        <pagination-control
          :paging-params="pagingParams"
          @onCurrentPage="handleCurrentChange"
          @onCurrentSize="handleSizeChange"
        />
      </div>
    </div>

  </div>
</template>

<script>
import {get, post} from "@/utils/http"
import PaginationControl from "@/layout/paginationControl.vue"

export default {
  components: {
    PaginationControl,
  },
  data: function() {
    return {
      avatar: '',
      tableData: [
          {
              "time": "2024-10-20 15:53:32",
              "user": "root",
              "info": "创建数据库",
              "database": "mysql",
              "sql_type": "DDL",
              "sql": "CREATE DATABASE school;",
              "status": "成功",
              "number": "0",
              "consume": "12",
              "remark": ""
          },
          {
              "time": "2024-10-20 15:53:52",
              "user": "root",
              "info": "删除数据库",
              "database": "mysql",
              "sql_type": "DDL",
              "sql": "DROP DATABASE school;",
              "status": "成功",
              "number": "0",
              "consume": "3",
              "remark": ""
          },
          {
              "time": "2024-10-20 15:58:32",
              "user": "root",
              "info": "创建表",
              "database": "mysql",
              "sql_type": "DDL",
              "sql": "CREATE TABLE students (id INT PRIMARY KEY, name VARCHAR(100), age INT);",
              "status": "成功",
              "number": "0",
              "consume": "7",
              "remark": ""
          },
          {
              "time": "2024-10-20 16:53:32",
              "user": "root",
              "info": "删除表",
              "database": "mysql",
              "sql_type": "DDL",
              "sql": "DROP TABLE users;",
              "status": "成功",
              "number": "8",
              "consume": "12",
              "remark": ""
          },
          {
              "time": "2024-10-20 19:53:32",
              "user": "root",
              "info": "插入数据",
              "database": "mysql",
              "sql_type": "DML",
              "sql": "INSERT INTO students (id, name, age) VALUES (1, 'Alice', 20);",
              "status": "成功",
              "number": "1",
              "consume": "3",
              "remark": ""
          },
          {
              "time": "2024-10-21 15:53:32",
              "user": "root",
              "info": "更新数据",
              "database": "mysql",
              "sql_type": "DML",
              "sql": "UPDATE students SET age = 21 WHERE id = 1;",
              "status": "成功",
              "number": "1",
              "consume": "4",
              "remark": ""
          },
          {
              "time": "2024-10-22 15:53:32",
              "user": "root",
              "info": "删除数据",
              "database": "mysql",
              "sql_type": "DML",
              "sql": "DELETE FROM students WHERE id = 1;",
              "status": "成功",
              "number": "1",
              "consume": "6",
              "remark": ""
          },
          {
              "time": "2024-10-21 16:53:32",
              "user": "root",
              "info": "查询所有数据",
              "database": "mysql",
              "sql_type": "DQL",
              "sql": "SELECT * FROM students;",
              "status": "成功",
              "number": "12",
              "consume": "3",
              "remark": ""
          },
          {
              "time": "2024-10-21 16:53:52",
              "user": "root",
              "info": "条件查询",
              "database": "mysql",
              "sql_type": "DQL",
              "sql": "SELECT * FROM students WHERE age > 18;",
              "status": "成功",
              "number": "4",
              "consume": "2",
              "remark": ""
          },
          {
              "time": "2024-10-21 17:58:32",
              "user": "root",
              "info": "使用聚合函数",
              "database": "mysql",
              "sql_type": "DQL",
              "sql": "SELECT COUNT(*) FROM students;",
              "status": "成功",
              "number": "1",
              "consume": "5",
              "remark": ""
          },
          {
              "time": "2024-10-21 15:58:59",
              "user": "root",
              "info": "分组查询",
              "database": "mysql",
              "sql_type": "DQL",
              "sql": "SELECT age, COUNT(*) FROM students GROUP BY age;",
              "status": "成功",
              "number": "1",
              "consume": "7",
              "remark": ""
          },
          {
              "time": "2024-10-22 9:53:32",
              "user": "root",
              "info": "排序结果",
              "database": "mysql",
              "sql_type": "DQL",
              "sql": "SELECT * FROM students ORDER BY age DESC;",
              "status": "成功",
              "number": "10",
              "consume": "5",
              "remark": ""
          },
          {
              "time": "2024-10-22 10:53:32",
              "user": "root",
              "info": "创建索引",
              "database": "mysql",
              "sql_type": "DDL",
              "sql": "CREATE INDEX idx_age ON students (age);",
              "status": "成功",
              "number": "0",
              "consume": "9",
              "remark": ""
          },
          {
              "time": "2024-10-22 11:53:32",
              "user": "root",
              "info": "删除索引",
              "database": "mysql",
              "sql_type": "DDL",
              "sql": "DROP INDEX idx_age ON students;",
              "status": "成功",
              "number": "0",
              "consume": "6",
              "remark": ""
          }
      ],
      queryParams: {
        user: '',
        title: '',
        type: '',
        start_time: '',
        end_time: ''
      },
      pagingParams: {
        page: 1,
        size: 20,
        total: 0
      },
      loading: false,
      typeList: {
        10: "科研项目",
        20: "发表论文",
        30: "发明专利",
        40: "专著与教材",
        50: "奖励",
        60: "代表性研究成果",
      },
    };
  },
  watch: {
  },
  created() {
    this.getList();
  },
  methods: {
    resetFilterForm() {
      for (const key in this.queryParams) {
        this.queryParams[key] = '';
      }
      this.getList(1);
    },
    getList(isReset) {
      // if (isReset) {
      //   this.pagingParams.page = 1;
      // }
      // const params = {
      //   page: this.pagingParams.page,
      //   size: this.pagingParams.size,
      //   is_all: 0,
      //   title: this.queryParams.title,
      //   type: this.queryParams.type,
      //   start_time: this.queryParams.start_time,
      //   end_time: this.queryParams.end_time
      // }
      // get("/achievement/manage/list", params)
      // .then(res=>{
      //   this.tableData = res.data.data.list;
      //   this.pagingParams.total = res.data.data.count;
      //   console.log(this.tableData);
      // })
      
      this.pagingParams.total = 14;
    },
    handleCurrentChange(val) {
      this.pagingParams.page = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.pagingParams.size = val;
      this.getList(1);
    },
  }
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="less" scoped>
.ach-list-wrap {
    height: 100%;
    width: 100%;
  position: relative;
    .status {
        color: #c0ccda;
        margin-right: 8px;
        &.active {
            color: #13ce66;
        }
    }
  .manager {
        color: #c0ccda;
        margin-right: 8px;
        &.active {
            color: #13ce66;
        }
    }
  .table-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 90px;
    bottom: 0;
    .el-table {
      font-size: 12px !important;
    }
  }
    .panel {
        box-shadow: 0 0 5px #ebe7e7;
        background-color: #fff;
        padding: 20px;
        overflow: hidden;
    display: flex;
    flex-direction: column;
        .table-btns {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 10px;
        }
    }
    .filter-form {
        display: flex;
        align-items: center;
        .form-content {
            flex: 1;
            margin-right: 20px;
            margin-top: -6px;
            margin-bottom: -6px;
        }
    }
    ::v-deep {
        .filter-form {
            .el-form-item {
                margin-bottom: 0;
                padding-top: 6px;
                padding-bottom: 6px;
            }
            .el-form-item__label {
                font-size: 12px;
                font-weight: normal;
            }
      .el-input--suffix .el-input__inner {
        height: 32px;
      }
        }
    .el-dialog__wrapper {
      display: flex;
      align-items: center;
      height: 100%;
    }
    .el-dialog{
      max-width: 95%;
      max-width: 88%;
      max-height: 88%;
      display: flex;
      flex-direction: column;
      margin-top: 0 !important;
      .el-dialog__body {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
      }
      .el-form-item {
        margin-bottom: 10px;
        .el-form-item__content{
          .el-select{
            width: 100%;
          }
        }
        .el-form-item__label {
          font-weight: 700;
        }
        .el-textarea__inner {
          font-family: "微软雅黑";
        }
        .el-textarea .el-input__count {
          line-height: 16px !important;
        }
      }
    }
    }
}
.el-button{
  border-radius: 16px;
  font-size: 12px;
  padding: 9px 15px;
  &.el-button--primary.is-plain{
    color: #409EFF;
    background: #E9F2FF;
    border: 1px solid #C4E1FF;
  }
  &.el-button--danger.is-plain{
    color: #FF9D9D;
    background: #FDEEEE;
    border: 1px solid #FFD4D4;
  }
}
//表格内容颜色
::v-deep .el-table__body tbody tr:nth-child(odd) {
  background-color: #FFFFFF;
}
::v-deep .el-table__body tbody tr:nth-child(even) td {
  background-color: #F1F8FF;
}
//表头文字样式
::v-deep .el-table__header-wrapper {
  thead {
    th{
      div{
        // font-weight: 700;
        // font-size: 20px;
        color: #333333
      }
    }
  }
}
.dialog-content {
  // ::v-deep .upload-img div .el-upload--picture-card {
  //   height: 150px;
  //   width: 300px;
  // }
  ::v-deep .upload-img .disable .el-upload--picture-card {display: none !important;}
  ::v-deep .upload-img .disable .el-upload--picture-card .el-upload-list__item-thumbnail {object-fit: cover !important;}
  // ::v-deep .upload-img .disable .el-upload--picture-card .el-upload-list__item {width: 300px !important; }
}
::v-deep .w-e-textarea-divider {
  margin: 0 !important;
  padding: 0 !important;
}
::v-deep .w-e-text-container [data-slate-editor] p  {
  margin: 0 !important;
}
::v-deep .w-e-text-container [data-slate-editor] h1, .w-e-text-container [data-slate-editor] h2, .w-e-text-container [data-slate-editor] h3, .w-e-text-container [data-slate-editor] h4, .w-e-text-container [data-slate-editor] h5 {
    margin: 0 !important;
}
::v-deep [data-v-7106d285] .w-e-text-container [data-slate-editor] h1, .w-e-text-container [data-slate-editor] h2[data-v-7106d285], .w-e-text-container [data-slate-editor] h3[data-v-7106d285], .w-e-text-container [data-slate-editor] h4[data-v-7106d285], .w-e-text-container [data-slate-editor] h5[data-v-7106d285] {
    margin: 0 !important;
}
  ::v-deep .w-e-text-container {
    margin: 0 !important;
  }
::v-deep .el-textarea .el-input__count {
  line-height: 16px !important;
}
.hide .el-upload--picture-card { display: none !important; }
</style>
